<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>猫抓 M3U8解析器</title>
    <link rel="stylesheet" type="text/css" href="css/options.css" media="all" />
    <script src="lib/jquery.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/firefox.js"></script>
    <script src="lib/mux.min.js"></script>
    <script src="js/m3u8.js"></script>
  </head>

  <body>
    <div class="m3u8_wrapper wrapper1080">

      <section id="loading">
        <div class="optionBox">
          文件载入中...
        </div>
      </section>

      <section id="m3u8Custom" class="hide">
        <h1 class="optionsTitle">猫抓 M3U8解析器</h1>
        <div class="optionBox">
          <span class="explain">请输入m3u8内容</span>
          <input type="text" id="baseUrl" placeholder="BaseURL" class="fullInput"/>
          <textarea rows="50" cols="160" id="m3u8Text" spellcheck="false" data-type="link" placeholder="输入m3u8内容 或 ts碎片列表"></textarea>
          <div class="line"></div>
          <span class="explain">或 输入m3u8的url</span>
          <input type="text" id="m3u8Url" placeholder="m3u8 URL" class="fullInput"/>
          <div class="line"></div>
          <input type="text" id="referer" placeholder="请求头 Referer" class="fullInput"/>
          <button id="parse" type="button">解析</button>
        </div>
      </section>

      <section id="more_m3u8" class="hide">
        <h1 class="optionsTitle">下一级文件</h1>
        <span class="explain">该m3u8文件中嵌套多个m3u8文件</span>
        <div class="optionBox">
          <div id="next_m3u8"></div>
        </div>
      </section>
      <section id="more_audio" class="hide">
        <h1 class="optionsTitle">多个音频</h1>
        <span class="explain">该m3u8文件中嵌套多个音频</span>
        <div class="optionBox">
          <div id="next_audio"></div>
        </div>
      </section>
      <section id="more_subtitle" class="hide">
        <h1 class="optionsTitle">多个字幕</h1>
        <span class="explain">该m3u8文件中嵌套多个字幕</span>
        <div class="optionBox">
          <div id="next_subtitle"></div>
        </div>
      </section>

      <section id="m3u8" class="hide">
        <h1 class="optionsTitle">猫抓 m3u8解析器</h1>
        <span class="explain" id="key"></span>
        <div class="optionBox">
          <div class="block">
            m3u8文件地址
            <p><a id="m3u8_url"></a></p>
          </div>
          
          <div class="block" id="tips"></div>

          <div class="videoInfo flex">
            <div id="count"></div>
            <div id="info"></div>
          </div>
          <div class="block" id="textarea">
            <textarea rows="50" cols="169" id="media_file" spellcheck="false" data-type="link">切片文件载入中....</textarea>
            <video id="video" class="hide" width="100%" controls></video>
          </div>

          <div class="block" id="button">
            <div class="merge">
              <button id="downText">下载显示内容</button>
              <button id="originalM3U8">原始m3u8</button>
              <button id="localFile">本地m3u8</button>
              <button id="getTs">ts列表</button>
              <button id="tsAddArg" class="hide">ts添加参数</button>
              <button id="play" data-switch="on">播放m3u8</button>
              <button id="m3u8DL" class="button2">调用m3u8DL下载</button>
              <button id="copyM3U8dl">复制m3u8DL命令</button>
              <button id="setM3u8dl">显示m3u8DL命令</button>
            </div>
            <textarea id="m3u8dlArg" type="text" class="m3u8dlArg hide"></textarea>
            <div class="line"></div>
            <div class="merge customKey">
              <input type="text" id="customFilename" spellcheck="false" placeholder="自定义 保存文件名" size="35"/>
              <input type="text" id="customKey" spellcheck="false" placeholder="自定义 密钥 16进制 或 base64" size="35"/>
              <input type="text" id="customIV" spellcheck="false" placeholder="自定义 偏移量 IV" size="35"/>
              <button id="uploadKey">上传Key</button>
              <input id="uploadKeyFile" type="file" class="hide" />
            </div>
            <div class="merge" id="mergeDown">
              <div id="threadDiv" class="themeColor">下载线程数 <input type="number" value="32" id="thread" spellcheck="false" style="width: 35px;" step="1" min="1" max="256"/></div>
              <label class="m3u8checkbox themeColor">mp4格式<input type="checkbox" id="mp4" checked="checked"/></label>
              <label class="m3u8checkbox themeColor">ffmpeg转码(beta)<input type="checkbox" id="ffmpegMp4"/></label>
              <label class="m3u8checkbox themeColor firefoxHide">边下边存(beta)<input type="checkbox" id="StreamSaver"/></label>
              <label class="m3u8checkbox themeColor">只要音频<input type="checkbox" id="onlyAudio"/></label>
              <label class="m3u8checkbox themeColor">另存为<input type="checkbox" id="saveAs"></label>
              <label class="m3u8checkbox themeColor">跳过解密<input type="checkbox" id="skipDecrypt"></label>
              <div class="rangeDown themeColor">
                下载范围
                <div class="merge">
                  <input type="number" id="rangeStart" spellcheck="false" placeholder="开始" step="1" min="1"/>
                  <input type="number" id="rangeEnd" spellcheck="false" placeholder="结束" step="1" min="1"/>
                </div>
              </div>
              <button id="mergeTs" class="button2">合并下载</button>
              <button class="openDir">打开下载目录</button>
              <button id="errorDownload" class="hide button2">重试所有失败项</button>
              <button id="ForceDownload" class="hide button2">下载已有数据</button>
              <button id="stopStream" class="hide button2">停止下载</button>
              <button id="recorder" data-switch="on" class="hide" data-switch="on">录制直播</button>
            </div>
            <div style="display: flex; margin-top: 10px;"><div id="progress"></div> <div id="fileSize"></div><div id="fileDuration"></div></div>
            <div class="block hide" id="errorTsList"></div>
          </div>

        </div>
      </section>
    </div>
    <script src="lib/m3u8-decrypt.js"></script>
    <script src="lib/hls.min.js"></script>
    <script src="lib/base64.js"></script>
    <script src="lib/StreamSaver.js"></script>
  </body>
</html>
